<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/courseLibrary.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<div id="rootDiv" class="container-fluid">
    <!--条件区-->
    <div class="condition">
        <!--课程名称-->
        <div class="condition_item">
            <p>课程名称:</p>
            <input type="text" class="form-control col-10" v-model="cname" placeholder="请输入课程名称">
        </div>
        <!--课程分类-->
        <div class="condition_item">
            <p>课程分类:</p>
            <select class="form-control col-10" v-model="selectCategory">
                <option value="0">全部</option>
                <option v-for="category in categories" :value="category.categoryId">{{category.categoryName}}</option>
            </select>
        </div>
        <!--课程标签-->
        <div class="condition_item">
            <p>课程标签:</p>
            <input type="text" class="form-control col-10" v-model="tagCondition" placeholder="请输入标签">
        </div>
        <!--课程状态-->
        <div class="condition_item">
            <p>课程状态:</p>
            <select class="form-control col-10" v-model="selectStatus" @change="changeStatus">
                <option value="0">全部</option>
                <option v-for="(status,index) in statuses" :value="index">{{status}}</option>
            </select>
        </div>
        <!--搜索&清除-->
        <div class="condition_item">
            <button style="margin-top: 20px;margin-left: 20px" class="btn btn-primary" @click="queryCoachesByCondition">搜索</button>
            <button style="margin-top: 20px;margin-left: 20px" class="btn btn-outline-primary" @click="clear">清除</button>
            <button class="btn btn-outline-success daochu">
                <i style="font-size:15px" class="fa fa-file-excel-o"></i> 导出Excel
            </button>
        </div>
    </div>
    <!--表格区-->
    <div class="showTable">
        <table class="table table-hover table-striped">
            <thead>
            <tr>
                <th>课程ID</th>
                <th>课程名称</th>
                <th>课程分类</th>
                <th>课件数</th>
                <th>课程标签</th>
                <th>讲师</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="course in courses">
                <th>{{course.cid}}</th>
                <th>{{course.cname}}</th>
                <th>{{course.categoryName}}</th>
                <th>{{course.coursewareNum}}</th>
                <th><span v-for="tag in course.tags">[{{tag}}]</span></th>
                <th>{{course.teacherName}}</th>
                <th><button class="btn btn-primary">发布</button></th>
            </tr>
            </tbody>
        </table>
    </div>
    <!-- 页码导航 -->
    <div id="pageNav">
        <div id="pageDiv">
            <ul class="pagination">
                <li class="page-item" :class="{disabled:prev}"  @click="forwardOne()"><a  class="page-link" href="javascript:void(0);">Previous</a></li>
                <li class="page-item" v-for="n in totalPage"  :class="{active:n==pageCode}"   @click="queryThisPage(n)"><a class="page-link" href="#">{{n}}</a></li>
                <li class="page-item" :class="{disabled:next}" @click="backOne()"><a  class="page-link" href="javascript:void(0);">Next</a></li>
            </ul>
        </div>

    </div>
    <!-- 页码导航 end-->
</div>
<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script src="js/header.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/courseLibrary.js"></script>
</body>
</html>